<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SimMind Example</title>
    <!-- 引入Element UI的样式 -->
    <!-- 其他必要的样式或脚本 -->
    <link rel="stylesheet" href="simmind.css">
</head>
<body>
<div id="app">
    <sim-mind
            ref="test"
            :root.sync="root"
            :theme.sync="theme"
            @savedata="headleSaveData"
            :lockStatus.sync="lockStatus"
            :uploadImage="uploadImage"
    />
</div>
<script src="https://wxserver.cards120.com/static/vue.js"></script>
<!-- 引入kity -->

<script src="simmind.umd.js"></script>
<script>
    // 确保 DOM 完全加载完成
    document.addEventListener('DOMContentLoaded', function() {


        new Vue({
            el: '#app',
            data() {

                return {
                    lockStatus: false,
                    theme: "",
                    root: {},
                };
            },
            methods: {
                async headleSaveData() {
                    let data = await this.$refs.test.getNowView();
                    console.log(data);
                    console.log(this.$refs.test.getNowView);
                },
                uploadImage(e) {
                    // eslint-disable-next-line no-unused-vars
                    return new Promise((reslove, reject) => {
                        console.log(e);
                        setTimeout(
                            reslove(
                                "https://blog.xkongkeji.com/static/img/cover1.fb9e08c.jpg"
                            ),
                            3000
                        );
                    });
                },
            },
            async mounted() {
                this.root = {"data":{"text":"test测试"},"children":[{"data":{"id":7466,"back":"<p>3</p>","mindmapLayer":0,"mindmapParentId":0,"mindmapSameLevelId":7471,"listSameLevelId":-1,"text":"3"},"children":[{"data":{"id":7469,"back":"<p>66</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7467,"listSameLevelId":-1,"text":"6 0"},"children":[]},{"data":{"id":7467,"back":"<p>5</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7469,"listSameLevelId":0,"text":"4"},"children":[]},{"data":{"id":7471,"back":"<p>8</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7469,"listSameLevelId":0,"text":"8"},"children":[{"data":{"id":7465,"back":"<p>222</p>","mindmapLayer":2,"mindmapParentId":7471,"mindmapSameLevelId":7468,"listSameLevelId":-1,"text":"2"},"children":[]},{"data":{"id":7464,"back":"<p>1</p>","mindmapLayer":2,"mindmapParentId":7471,"mindmapSameLevelId":7466,"listSameLevelId":-1,"text":"1"},"children":[]}]},{"data":{"id":7472,"back":"<p>9</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7471,"listSameLevelId":0,"text":"9"},"children":[]},{"data":{"id":7470,"back":"<p>7</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7471,"listSameLevelId":0,"text":"7"},"children":[]},{"data":{"id":7468,"back":"<p>5</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7467,"listSameLevelId":0,"text":"51"},"children":[]}]}],"_updata":true};
                this.theme = "fresh-green-compat";
            } });
        })




    ;
</script>
</body>
</html>

<style lang="scss">
    * {
        margin: 0;
        padding: 0;
    }
    #app {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
</style>